var PAPER = {};


PAPER = {
	init	: function(){
		var self = this;
		self.UI.init();
	}
}

PAPER.TEMPLATE = {
	template1	: [
	"	<li class='cols' role=",/*1 id*/," style='background-image:url(\"",/*3 image*/,"\")'>"+
	"	  <div class='caption'>"+
	"		<h3>",/*tag*/,"</h3>"+
	"		<p>",/*contents*/,"</p>"+
	"  	</li>"
	],

	template2	: [
	"	<li class='cols' role=",/*1 id*/,">"+
	"	  <img src=",/*3 image*/," alt='...'>"+
	"	  <div class='caption'>"+
	"		<h3>",/*tag*/,"</h3>"+
	"		<p>",/*contents*/,"</p>"+
	"  </li>"]	
}


$(function(){
PAPER.UI = {
	$tag_list		: Dom.getId("tag_list"),
	$magagine_each	: $(".magagine_each"),
	_json_tag_data 	: {},

	init	: function(){
		var self = this;	
		self.load();
		self.bind();
		
	},
	bind	: function(){
		var self = this;	
		self.$magagine_each.unbind().bind("click",function(){
		 	Book.open($(this).attr("flag"));	
		});

		$("#btnSearch").unbind().bind("click",function(){
			self.searchKeyword();
		});
		$("#txtKeyword").unbind().bind("keyup",function(e){
			if (e.keyCode ==13 ) {
				console.log(e);
				self.searchKeyword();
			} 
		});


	

		//$(window).bind('scroll.wookmark', self.onScroll);
	},
	restruct: function(){
		var self = this;	
		
	},
	load	: function(){
		var self =this;
		$.ajax({
			url		: "/paper.php?service=api_paper_getRecentScrap",
			type	: "post",
			data	: {},
			dataType: "json",
			success	: function(json){
				self._json_recent_data = json.RESPONSE.recent;	
				self.makePaper();
			}
		})
	},

	makePaper	:	function() {
		var self = this;
		$("#tiles").empty();
		for (var i in self._json_recent_data){
			if (self._json_recent_data[i]['thumb'] == undefined){
				var template = PAPER.TEMPLATE.template1; 
			}else{
				var template = PAPER.TEMPLATE.template2;
			}
			template[1] = self._json_recent_data[i]['h_tag'];
			template[3] = self._json_recent_data[i]['thumb'];
			template[5] = self._json_recent_data[i]['h_tag'] + "(" + self._json_recent_data[i]['cnt'] + ")";
			//PAPER.TEMPLATE.paper[7] = self._json_recent_data[i]['content'].substr(0,300);
			$('#tiles').append(template.join(''));
		}
		self.applyLayout();

		$("li.cols").unbind().bind("click", function(){
			console.log(this);
			location.href = "/paper.php?service=view_paper_list#"+ $(this).attr("role");
		});
	},

	applyLayout	:	function(){
		var self = this;
		var $tiles = $('#tiles'),
          $handler = $('li', $tiles),
          $main = $('#main'),
          $window = $(window),
          $document = $(document),
          options = {
            autoResize: true, // This will auto-update the layout when the browser window is resized.
            container: $main, // Optional, used for some extra CSS styling
            offset: 20, // Optional, the distance between grid items
            itemWidth: 310 // Optional, the width of a grid item
          };


		$tiles.imagesLoaded(function() {
          // Destroy the old handler
          if ($handler.wookmarkInstance) {
            $handler.wookmarkInstance.clear();
          }

          // Create a new layout handler.
          $handler = $('li', $tiles);
          $handler.wookmark(options);
        });
	},

	searchKeyword	:	function(){
		var self =this;
		$.ajax({
			url		: "/paper.php?service=api_paper_getRecentScrap",
			type	: "post",
			data	: {"keyword" : $("#txtKeyword").val()},
			dataType: "json",
			success	: function(json){
				self._json_recent_data = json.RESPONSE.recent;	
				self.makePaper();
			}
		})
		
	},

	onScroll :	function(){
		var self = this;
		var $tiles = $('#tiles'),
		$window = $(window),
        $document = $(document);
        // Check if we're within 100 pixels of the bottom edge of the broser window.
        var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
            closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);

        if (closeToBottom) {
          // Get the first then items from the grid, clone them, and add them to the bottom of the grid
          var $items = $('li', $tiles),
              $firstTen = $items.slice(0, 10);
          $tiles.append($firstTen.clone());

        }
    },
	
	makeCloude: function(){
		var self = this;	
		for(var i in self._json_tag_data){
			var span_tag = Dom.makeEle("span",{"class" : "span_tag"});
			var span_slash = Dom.makeEle("span",{"class" : "span_slash"});
			span_slash.innerHTML = "";
			var a_tag = Dom.makeEle("a",{
					"href" 	: "javascript:void(0)",
					"alt" 	: self._json_tag_data[i].h_tag 
			});
			a_tag.innerHTML = self._json_tag_data[i].h_tag;
			a_tag.onclick = function(){
				Book.open("TAG",this.getAttribute("alt"));	
			}
			Dom.setCss(a_tag,{
				"font-size" 	: 10 + parseInt(self._json_tag_data[i].cnt) + "px",
				"font-weight" 	: 100 + parseInt(self._json_tag_data[i].cnt),
				"opacity" 		: 0.5 + parseInt(self._json_tag_data[i].cnt/100),
				"filter" 		: "alpha(opacity=" +50 + parseInt(self._json_tag_data[i].cnt/100) + ")"
				
			});
			Dom.appendEle(span_tag,[a_tag]);
			Dom.appendEle(self.$tag_list,[span_tag,span_slash]);
		}
		
	}

}


PAPER.SERVER = {


}


	PAPER.init();
});

